<template>
  <div class="dropdown-select">
    <van-dropdown-menu>
      <template v-for="(item, index) in itemsData" :key="index">
        <!-- 位置 -->
        <van-dropdown-item :title="item.label" v-if="item.gType === 2">
          <search-sidebar :sidebar-data="locationData"></search-sidebar>
        </van-dropdown-item>
        <!-- 排序 -->
        <van-dropdown-item
          :title="rankTitle"
          :options="rankOptions"
          v-model="rankValue"
          v-if="item.gType === 4"
        />
        <!-- 筛选 -->
        <van-dropdown-item :title="item.label" v-if="item.gType === 1">
          <search-sidebar :sidebar-data="screenData"></search-sidebar>
        </van-dropdown-item>
      </template>
    </van-dropdown-menu>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import SearchSidebar from "./search-sidebar.vue";
const props = defineProps({
  itemsData: {
    type: Array,
    default: () => [],
  },
});
// 组成rankOptions
const rankValue = ref(0);
const rankOptions = [];
const rankData = props.itemsData.find((item) => item.gType == 4).items;
rankData.forEach((item, index) => {
  rankOptions.push({ text: item.label, value: index });
});

// 组成locationData
const locationData = props.itemsData.find((item) => item.gType == 2).subGroups;

// 组成screenData
const screenData = props.itemsData.find((item) => item.gType == 1).subGroups;

// 计算排序标题
const rankTitle = computed(() => {
  if (rankOptions) {
    return rankOptions[rankValue.value].text;
  } else {
    return "排序";
  }
});
</script>

<style lang="less" scoped>
.dropdown-select {
  width: 100%;
}
</style>
